<template>
  <section class="container">
    <div class="vnslogo">
      <img src="../assets/image/vnslogo.png" alt="" />
      <h3>维纳斯账号登录</h3>
    </div>

    <div class="user-login">
      <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="50px"
          class="demo-ruleForm"
          style="background:#fff;padding:30px 0;border-radius:20px"
        >
          <el-form-item label="邮箱:" prop="username" style="margin-left:42px">
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入邮箱"
              style="width:220px;border:none"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password" style="margin-left:42px">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入密码"
              style="width:220px;border:none"
            ></el-input>
          </el-form-item>
          <el-form-item style="" >
            <el-button type="primary" 
              @click="submitForm('ruleForm')"
              style="width:258px;margin-top:20px"
              round
              >立即登录</el-button
            >
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
        </el-form>
    </div>
    <!-- 登录按钮 -->
    <!-- <div class="login-btn">
      <button>立即登录</button>
    </div> -->
    <div class="login-link">
      <router-link to="/">返回首页</router-link>
      <span>丨</span>
      <router-link to="/register">注册账号</router-link>
      <span>丨</span>
      <a href="#">忘记密码?</a>
    </div>
  </section>
</template>

<script>
import { userLogin } from '../api/user';
export default {
   data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { validator: validateName, trigger: "blur" },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log(this.ruleForm);
          console.log('发起登录请求');

          userLogin(this.ruleForm)
          // .then(res=>{
          //   console.log(res);
          //   let {data} = res
          //   if(data.length){
          //       this.$message({
          //       type:'success',
          //       message:'登录成功'
          //     })
          //   }else{
          //     this.$message({
          //       type:'error',
          //       message:'登录失败，用户已存在'
          //     })
          //   }
          // })

          //触发异步action登录
          this.$store.dispatch('user/userLoginAct',this.ruleForm)
        } else {
          console.log("请正确输入账号");
          this.$message({
              type:'warning',
              message:'请正确输入账号'
          })
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background: #ddd;
  section {
    position: absolute;
    width: 100%;
    height: 100%;
    // background: #eee;
    .vnslogo {
      text-align: center;
      img {
        width: 60px;
        height: 60px;
      }
      h3 {
        margin: 18px 0;
        font-size: 18px;
        color: #999;
      }
    }
  }
  .user-login {
    color: #666;
    width: 353px;
    border-radius: 20px;
    background-color: #fff;
    margin: 25px 10px;
    .user-login-form {
      .user-login-tab {
        height: 45px;
        background: #f5f5f5;
        border-radius: 20px 20px 0 0;
        display: flex;
        justify-content: space-around;
        line-height: 45px;
        div {
          width: 50%;
          text-align: center;
        }
        .left {
          border-radius: 20px 0 0 0;
          background: #fff;
          color: #f60;
        }
        .right {
          border-radius: 0px 20px 0 0;
          background: #fff;
          color: #f60;
        }
      }
    }
    input {
      border: none;
    }
    .user-login-name {
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-around;
      line-height: 50px;
    }
    .user-login-pwd {
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-around;
      line-height: 50px;
    }
    .user-login-msg {
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-around;
      line-height: 50px;
    }
  }
  .login-btn {
    button {
      width: 353px;
      height: 41px;
      margin: 0 0 0 10px;
      border: none;
      background: #f60;
      color: #fff;
      border-radius: 25px;
    }
  }
  .login-link{
    display: flex;
    padding: 0 50px;
    margin-top: 10%;
    justify-content: space-around;
    a{
      display: inline-block;
      color: #666;
    }
    span{
      color: #ddd;
    }
    
  }
}
</style>